<template>
	<view class="activity-rob-money-exchange" :style="[{paddingTop:statusBar+ 'px'}]" v-if="user">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">抢购金兑换</view>
		</view>
		<view class="navigation-position"></view>
		<view class="my-rob-money">
			<text>我的抢购金</text>
			<text>{{ user.gold_cashes }}元</text>
		</view>
		<view class="money-exchange-tab-title">抢购金兑换</view>
		<view class="money-exchange-tab-area">
			<view class="money-exchange-tab-item" v-for="(item,index) in exchangeTabList" :key="index" :class="[index==tabIndex?'tabActive':'']" @click="tabExchange(index,item.money,item.goldBean)">
				<view>
					<text>{{ item.money }}</text>
					<text>元</text>
				</view>
				<view>抢购金</view>
				<view>{{ item.goldBean }}金豆</view>
			</view>
		</view>
		<view class="money-exchange-btn" @click="buyingGoldCashesMth()">立即兑换 {{ exchangeMoney }}元抢购金</view>
		
		<view class="activity-account-list">
			<view class="activity-account-title">
				<view>账户明细</view>
				<view>
					<picker @change="bindPickerChange" :value="index" :range="arr">
						<view class="drop-down-box">
							<view class="">{{arr[index]}}</view>	
							<image src="/static/images/drop-down.png" class="drop-down" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			
			<view class="date-box">
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"  ref="datetimePicker" />
			</view>
			
			<view class="totla-money" v-if="total_num>0&&type!=''">
				<text>合计：</text>
				<view class=""><text>＋</text> <text>{{ total_num }}</text></view>	
			</view>
			
			<view class="totla-money totla-money-out" v-if="total_num<0&&type!=''">
				<text>合计：</text>
				<text>{{ total_num }}</text>
			</view>	
			
			<view class="activity-account-item" v-for="(item,index) in pageItems" :key="index" @click="geAccountDetail(item)" v-if="pageItems.length>0">
				<view>
					<view>{{ item.reason }}</view>
					<view>{{ item.created_at | timeFormatSeconds }}</view>
				</view>
				<view class="come-money" v-if="item.money>0"><text>＋</text>{{ item.money }}</view>
				<view class="out-money" v-else>{{ item.money }}</view>
			</view>
			
			
			<view class="no-more" v-if="pageHasNoMore&&pageItems.length!=0" >
			  --- 没有更多数据了 ---
			</view>
			<view class="nodata-box" v-if="pageHasNoMore&&pageItems.length==0">
				<image src="/static/images/nodata-icon.png" mode="" class="nodata-icon"></image>
				<view class="nodata-text">暂无数据</view>
			</view>
			
		</view>
		
		<uni-popup ref="passwordPopup" type="center" :mask-click="false">
			<view class="password-confirm-modal">
				<view class="password-confirm-tips">请输入交易密码</view>
				<view class="password-confirm-ipt-box">
					<input type="password" class="password-confirm-ipt" value="" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />
				</view>	
				<view class="password-confirm-bottom">
					<view @click="closePop()" >取消</view>
					<view @click="confirm()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	
	let params = getRequestParams();
	
	let token = params['token'];
	
	let status_bar =  params['status_bar'];
	
	let source = 'wap';
	
	if(token!=undefined){
		
		uni.setStorage({key: 'token',data: token })
		
		source = 'app';
		
	}
	if(status_bar!=undefined){
		
		uni.setStorage({ key: 'status_bar', data: status_bar })
		
	} */
	
	import store from "store";
	
	import {mapGetters,mapMutations,mapActions} from 'vuex';
	
	import { buyingGoldCashes,goldCashesList } from "api/goldstormApi.js";
	
	import Pagination from "mixins/Pagination";
	
	import { getUser } from "api/userApi";

	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar',
				'isLogin'
			]),
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
		},
		watch: {
			datetimerange(newval) {
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			}
		},
		mixins:[
			Pagination,
			// CurrentUser
		],
		data(){
			const currentDate = this.getDate({
					format: true
			})
			return{
				source:source,
				exchangeTabList:[
					{
						money:10000,
						goldBean:10
					},
					{
						money:50000,
						goldBean:50
					},
					{
						money:100000,
						goldBean:100
					}
				],
				tabIndex:0,
				password:null,
				isClick:true,
				beans:10,
				exchangeMoney:10000,
				arr:['全部','金豆兑换抢购金','平台扶持抢购金','直邀见习赠送抢购金','平台赠送抢购金','黄金风爆订单支出'],
				array: [
					{
						type:'',
						name:'全部',
					},
					{
						type:'bean_cashes',
						name:'金豆兑换抢购金'
					},
					{
						type:'support_cashes',
						name:'平台扶持抢购金'
					},
					{
						type:'first_cashes',
						name:'直邀见习赠送抢购金'
					},
					{
						type:'present_cashes',
						name:'平台赠送抢购金'
					},
					{
						type:'pay_record',
						name:'黄金风爆订单支出'
					}
				],
				date: currentDate,
				range: [],
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				start_time:'',
				end_time:'',
				index: 0,
				total_num:null,
				isActivityGoldCashes:true,
				type:''
			}
		},
		methods:{
			...mapMutations([
				'setUser'
			]),
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.type = this.array[this.index].type
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
			
					if (type === 'start') {
							year = year;
					} else if (type === 'end') {
							year = year + 2;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			},
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					backToApp.postMessage('back');
				}
			},
			tabExchange(index,money,beans){
				this.tabIndex = index;
				this.exchangeMoney = money;
				this.beans = beans;
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async buyingGoldCashesMth(){
				let parms = {
					beans:this.beans,
				}
				const response =  await buyingGoldCashes(parms)
				if(!response.message){
					this.$refs.passwordPopup.open('center')
				}else{
					if(Object.values(response.errors)[0][0]=='请输入交易密码'){
						this.$refs.passwordPopup.open('center')
					}else if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
						let _this = this
						uni.showModal({
							content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
							confirmText:'去绑定',
							success: function (res) {
								if (res.confirm) {
									if(_this.statusBar>0){
										// window.flutter_inappwebview.callHandler('bind_alipay_app')
										bindAlipayApp.postMessage('bindali');
									}else{
										uni.navigateTo({url: '/packs/pages/download/download?from=1'})
									}
								}
							}
						})
					}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
						if(this.statusBar>0){
							setPayCodeByApp.postMessage('paycodeset');
						}else{
							uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
						}
					}else{
						uni.showModal({
							title:'提示',
							content:Object.values(response.errors)[0][0],
							confirmText:'知道了',
							confirmColor:'#FF6011',
							showCancel:false
						})
					}
				}
			},
			closePop(){
				this.$refs.passwordPopup.close()
				this.password = null
			},
			async confirm(){
				if(this.password){
					if(this.isClick){
						this.isClick = false;
						let parms = {
							beans:this.beans,
							pay_code:this.password
						}
						this.closePop()
						const response =  await buyingGoldCashes(parms)
						this.password = null;
						this.isClick = true;
						if(!response.message){
							uni.showToast({
								title:'兑换成功'
							})
						}else{
							if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可兑换！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
							}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
								if(this.statusBar>0){
									setPayCodeByApp.postMessage('paycodeset');
								}else{
									uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
								}
							}else{
								uni.showModal({
									title:'提示',
									content:Object.values(response.errors)[0][0],
									confirmText:'知道了',
									confirmColor:'#FF6011',
									showCancel:false
								})
							}
						}
					}
					setTimeout(()=>{
						this.getUser()
					},1000)
					
				}else{
					uni.showModal({
						title:'提示',
						content:'请输入交易密码！',
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
			},
			async refresh(){
				if(this.datetimerange.length!=0){
					this.$refs.datetimePicker.clear()
				}else{
					this.pageNumber = 1
					this.pageHasNoMore = false
					this.pageMeta = {}
					this.pageItems = []
					await this.loadPageData()
				}
			},
			async loadPageItems() {
				let condition = this.type;
				let start_time = this.datetimerange[0];
				let end_time = this.datetimerange[1];
				
				return await goldCashesList({page: this.pageNumber,condition:condition,start_time:start_time,end_time:end_time}) 
			},
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			if(await this.isLogin ||  await this.statusBar>0){
				await this.getUser()
			}
		},
		async onLoad() {
			if(await this.isLogin ||  await this.statusBar>0){
				await this.loadPageData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.my-rob-money{
		width: 686rpx;
		height: 106rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:20rpx auto 0;
		display: flex;
		align-items: center;
		>text:nth-child(1){
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 32rpx;
		}
		>text:nth-child(2){
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			margin-left: 24rpx;
		}
	}
	.money-exchange-tab-title{
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		margin:36rpx 0 0 32rpx;
	}
	.money-exchange-tab-area{
		display: flex;
		margin:32rpx 0 0 32rpx;
	}
	.money-exchange-tab-item{
		width: 218rpx;
		height: 184rpx;
		background: #EDEDED;
		border-radius: 16rpx;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		>view:nth-child(1){
			>text:nth-child(1){
				font-size: 40rpx;
				font-weight: 600;
				color: #333333;
				line-height: 56rpx;
			}
			>text:nth-child(2){
				ont-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			margin:0 0 16rpx 0;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}
	}
	.tabActive{
		width: 210rpx;
		height: 176rpx;
		border: 4rpx solid #FF4924;
	}
	.money-exchange-btn{
		width: 686rpx;
		height: 96rpx;
		background: #1877FF;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 84rpx auto 0;
	}
	.password-confirm-modal{
		width: 620rpx;
		height: 300rpx;
		padding:20rpx 0 64rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.password-confirm-tips{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		text-align: center;
	}
	.password-confirm-ipt-box{
		width: 528rpx;
		height: 84rpx;
		background: #F6F6F6;
		border-radius:15rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin:30rpx auto;
	}
	.password-confirm-ipt{
		width: 450rpx;
		font-size: 28rpx;
		color: #555555;
	}
	.password-confirm-bottom{
		width: 100%;
		height: 90rpx;
		display: flex;
		border-top: 1rpx solid #cccccc;
		position: absolute;
		left:0;
		bottom: 0;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
		}
		>view:nth-child(1){
			color:#999999;
		}
		>view:nth-child(2){
			color:#FF6011;
			border-left: 1rpx solid #cccccc;
		}
	}
	.activity-account-list{
		margin-top: 44rpx;
		padding:0 32rpx 150rpx 32rpx;
	}
	.activity-account-title{
		width: 686rpx;
		margin: 0 auto;
		padding-bottom:32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view:nth-child(1){
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
		}
		>view:nth-child(2){
			// width: 196rpx;
			padding: 0 20rpx;
			height: 60rpx;
			background: #F0F0F0;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			>image{
				display: block;
				width: 24rpx;
				height: 24rpx;
				margin-left: 12rpx;
			}
		}
	}
	.totla-money{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 15rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FF9500;
		margin-bottom: 20rpx;
		>text:nth-child(1){
			font-size: 30rpx;
		}
		>view:nth-child(2){
			>text:nth-child(1){
				font-size:28rpx;
			}
		}
	}
	.totla-money-out{
		color: #333333;
	}
	.drop-down-box{
		display: flex;
		align-items: center;
	}
	.drop-down{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}
	.activity-account-item{
		width: 622rpx;
		margin: 0 auto;
		padding: 0 32rpx;
		height: 148rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		// align-items: center;
		justify-content:space-between;
		margin-bottom: 16rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 32rpx;
			>view:nth-child(2){
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 16rpx;
			}
		}
		.come-money{
			font-size: 36rpx;
			height: 36rpx;
			font-weight: bold;
			color: #FF9500;
			line-height: 40rpx;
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			>text{
				font-size: 28rpx;
			}
		}
		.out-money{
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			margin-top: 32rpx;
		}
	}
	.no-more{
		text-align: center;
		font-size: 26rpx;
		color:#999999;
		margin-top: 30rpx;
	}
	.nodata{
		width: 100%;
		height: 50rpx;
		position: absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.nodata-box{
		width:686rpx;
		height: 390rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.nodata-icon{
		display: block;
		width: 320rpx;
		height: 320rpx;
		margin: 0 auto;
	}
	.nodata-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		text-align: center;
	}
	/* 时间范围选择 */
	.date-box{
		margin-bottom: 20rpx;
	}
	/deep/.uni-date-x{
		justify-content:flex-start;
		border-radius: 16rpx;
		padding: 0 5rpx 0 10rpx;
		font-size: 26rpx;
	}
	/deep/.uni-date-x--border{
		border-radius: 16rpx;
		border: 1rpx solid #dcdfe6;
	}
	/deep/.uni-date__x-input{
		width: 270rpx;
		font-size: 26rpx;
		padding: 0 5rpx;
	}
	/deep/.uni-datetime-picker--btn{
		background-color: #FE354B;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--before-checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item__weeks-box .uni-calendar-item--checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--after-checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item__weeks-box-text{
		color: #333333;
	}
</style>